<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Manage <strong>Disciplines</strong></h1>   
                    <div id="example" class="k-content">
                    <input type="hidden" name="baseUrl" value="<c:url value="/manage/disciplines/"/>"/>
                        <div class="demo-section">
                            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new discipline</a>
                        </div>

                        <div class="demo-section">
                            <div id="listView"></div>
                            <div id="pager" class="k-pager-wrap"></div>
                        </div>

                        <script type="text/x-kendo-tmpl" id="template">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
                            </div>
                            <dl>
                            <dt>Discipline Name</dt>
                            <dd>#:discipline_name#</dd>
                            <dt>Discipline Code</dt>
                            <dd>#:discipline_code#</dd>
                            </dl>
                            </div>
                        </script>

                        <script type="text/x-kendo-tmpl" id="editTemplate">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
                            </div>
                            <dl>
                            <dt>Discipline Name</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:discipline_name" name="discipline_name" required="required" validationMessage="required" />
                            <span data-for="discipline_name" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Discipline Code</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:discipline_code" name="discipline_code" required="required" validationMessage="required" />
                            <span data-for="discipline_code" class="k-invalid-msg"></span>
                            </dd>
                            </dl>
                            </div>
                        </script>

                        <script>
                            $(document).ready(function() {
                            var baseUrl = $("input[name='baseUrl']").val();
                            dataSource = new kendo.data.DataSource({
                            transport: {
                            read: {
                            url:  baseUrl+"read",
                            type:"POST",
                            dataType: "json"
                            },
                            update: {
                            url:  baseUrl+"update",
                            type:"POST",
                            dataType: "json"
                            },
                            destroy: {
                            url:  baseUrl+"delete",
                            type:"POST",
                            dataType: "json"
                            },
                            create: {
                            url:  baseUrl+"create",
                            type:"POST",
                            dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                            }
                            }
                            },
                            batch: true,
                            pageSize: 4,

                            schema: {
                            model: {
                            id: "discipline_id",
                            fields: {
                            discipline_id: {editable: false, nullable: true},
                            discipline_name: "discipline_name",
                            discipline_code:"discipline_code"
                            }
                            }
                            }
                            });


                            $("#pager").kendoPager({
                            dataSource: dataSource
                            });

                            var listView = $("#listView").kendoListView({
                            dataSource: dataSource,
                            remove: function(e) {
                                    if(!confirm("This discipline and all of its courses and staff members will be deleted. Are you sure you want to delete?")) e.preventDefault(); 
                            },
                            template: kendo.template($("#template").html()),
                            editTemplate: kendo.template($("#editTemplate").html())
                            }).data("kendoListView");

                            $(".k-add-button").click(function(e) {
                            listView.add();
                            e.preventDefault();
                            });
                            });
                        </script>

                        <style scoped>
                            .demo-section {
                                width: 785px;
                            }
                            #pager{
                                min-width: 779px;
                            }
                            .product-view
                            {
                                float: left;
                                position: relative;
                                width: 390px;
                                margin: -1px -1px 0 0;
                            }
                            .product-view dl
                            {
                                margin: 10px 0;
                                padding: 0;
                                min-width: 0;
                            }
                            .product-view dt, dd
                            {
                                float: left;
                                margin: 0;
                                padding: 3px;
                                height: 26px;
                                width: 160px;
                                line-height: 26px;
                                overflow: hidden;
                            }
                            .product-view dt
                            {
                                clear: left;
                                padding: 3px 5px 3px 0;
                                text-align: right;
                                opacity: 0.6;
                                width: 100px;
                            }
                            .k-listview
                            {
                                border: 0;
                                padding: 0;
                                min-width: 705px;
                                min-height: 170px;
                            }
                            .k-listview:after, .product-view dl:after
                            {
                                content: ".";
                                display: block;
                                height: 0;
                                clear: both;
                                visibility: hidden;
                            }
                            .edit-buttons
                            {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 26px;
                                height: 82px;
                                padding: 2px 2px 0 3px;
                                background-color: rgba(0,0,0,0.1);
                            }
                            .edit-buttons .k-button
                            {
                                width: 26px;
                                margin-bottom: 1px;
                            }
                            .k-pager-wrap
                            {
                                border-top: 0;
                            }
                            span.k-invalid-msg
                            {
                                position: absolute;
                                margin-left: 6px;
                            }
                        </style>
                    </div>



                </div>
            </div>
        </div>
    </body>
</html>
